<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app2">

    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversed }}"</p>
    <p>now: "{{ now }}"</p>
    //template会将整个替换，而其他如span只会替换内部
    <template v-if="true">
        <div>你好</div>
    </template>
    <span v-if="ak">fdsfa</span>

    <template v-if="loginType === 'u'">
        <label>Username</label>
        <input placeholder="Enter your username">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address">
    </template>
    <button @click="co">gggggg</button>

</div>


<div id="app">

</div>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>

    const vv=new Vue({
        el: '#app2',
        data: {
            message: 'Hello',
            ak:true,
            loginType:''
        },
        computed: {
            // 计算属性的 getter
            reversed: {

                get:function () {
                    // `this` 指向 vm 实例
                    return this.message.split('').reverse().join('')
                },
                set:function (newv) {
                    this.message=newv;
                    alert("我在摄制组加入新值"+newv)
                }
            },
            now: function () {
                return Date.now()
            },

        },
        methods: {
            co(){
                 this.loginType = this.loginType=='u'?'e':'u'
            }
        }
    })

    var data = {
        name: '张三',
        items: [
            {id: 1, text: '广东'}
        ],

    }

    // Vue 根实例
    const vm = new Vue({
        el: "#app",
        data: data,
        components: {},
        computed: {
            ff:function(){
                return this.name.split('').reverse().join('')
            }
        },
        methods: {


        },
        created() {

        },
        mounted() {

        }
    });


</script>
</body>
</html>